﻿
<!-- /PAGE HEADER -->
<!-- FORMS -->
<div class="row">
	<div class="col-md-12">
		<div class="row">
			<div class="col-md-6">
				<!-- BASIC -->
				<div class="box border orange">
					<div class="box-title">
						<h4><i class="fa fa-bars"></i>添加角色</h4>
						<div class="tools hidden-xs">
							<a href="#box-config" data-toggle="modal" class="config">
								<i class="fa fa-cog"></i>
							</a>
							<a href="javascript:;" class="reload">
								<i class="fa fa-refresh"></i>
							</a>
							<a href="javascript:;" class="collapse">
								<i class="fa fa-chevron-up"></i>
							</a>
							<a href="javascript:;" class="remove">
								<i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="box-body big">
						<form class="form-horizontal" enctype="multipart/form-data" action="" method="post" role="form">

						  <div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">角色名称</label>
							<div class="col-sm-10">
							  <input type="text" name="name" class="form-control" id="inputEmail3" placeholder="请输入角色名称">
							</div>
						  </div>

						 <div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">是否启用</label>
							<div class="col-sm-10">
							  <input type="radio" name="status" value="1"  id="inputEmail3" >是
							  <input type="radio" name="status" value="0" id="inputEmail3" >否
							</div>
						  </div>

						  <div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
							  <button type="submit" class="btn btn-pink">提交</button>
							</div>
						  </div>

							<div class="row">
								<div class="col-md-12">
									<!-- BOX -->
									<div class="box border green">
										<div class="box-title">
											<h4><i class="fa fa-bars"></i>权限列表</h4>
												&nbsp;&nbsp;&nbsp;
											<input type="button" class="btn btn-pink"   value="全选" id="selectAll"/>
											<input type="button" class="btn btn-pink"  value="取消" id="reverse" />

											 <!--  <button  onclick="allSelect()" type="button" class="btn btn-pink">全选</button>
											  <button onclick="noSelec()" type="buton" class="btn btn-pink">取消</button> -->

										</div>
										<div class="box-body">

										<!-- 分类开始 -->
											<?php foreach($parent as $v){?>
											<div class="panel-group" id="accordion">
											  <div class="panel panel-default">
												 <div class="panel-heading">
													<h3 class="panel-title">
														<input type="checkbox" value="<?=$v['id']?>" name="power[]"><?=$v['name']?>
													</h3>
												 </div>
												 	<div id="collapseOne" class="panel-collapse in" style="height: auto;">
														<div class="panel-body">

															<!-- 子级分类:判断父级的id是否等于子级的id -->
														<?php foreach($child as $ve){
																if($v['id']==$ve['pid']){
															?>
															<input type="checkbox" name="power[]" value="<?=$ve['id']?>"><?=$ve['name']?>
														<?php }
														 }?>

														</div>
											 		</div>
												 </div>
											  </div>
											<?php }?>
										   </div>
										</div>
									</div>
									<!-- /BOX -->
								</div>
							</div>

						</form>

					</div>
				</div>
				<!-- /BASIC -->
				<!-- BASIC -->

				<!-- /BASIC -->
			</div>

		</div>

</div>


<script src="resources/admin/js/jquery/jquery-2.0.3.min.js"></script>
<script  type="text/javascript"r>
	$(function(){
		//勾选父级的时候子级全部选中
//思路：   1、给所有父级的checkbox绑定点击事件
		//给类名为panel-title的h3标签里的checkbox添加点击事件
		$('.panel-title :checkbox').click(function() {
		//2、抓取当前点击的那个父级的所有子级，然后让他们选中
				//如何抓取-》父级复选框于子级的复选框之间的间隔：
				/*
		第2个parent()->	<div class="panel-heading">
		第2个parent()->	<h3 class="panel-title">
					$(this)-> <input type="checkbox" name="">新闻管理
					</h3>
			 	</div>
		next()->	 	<div id="collapseOne" class="panel-collapse in" style="height: auto;">
					<div class="panel-body">
			find(':checkbox'),指向下面所有input标签
						<input type="checkbox" name="">新闻添加
						<input type="checkbox" name="">新闻删除
						<input type="checkbox" name="">新闻修改
					</div>
		 		</div>
				 */
				//通过自己$(this)找到父级标签parent()，在父级标签的基础上，找到为选中状态的父级复选框，得到其长度
				var len=$(this).parent().find(':checkbox:checked').length;
				if(len>0){//长度大于0，则子级选中
					$(this).parent().parent().next().find(':checkbox').prop('checked', true);
				}else{//长度小于0，则子级取消选中
					$(this).parent().parent().next().find(':checkbox').prop('checked', false);
				}
			})

		//勾选子级父级要选中,与勾选父级的时候子级全部选中的思路是一样的
		//如果所有子级都不选中了那么父级也就不选中？
		//解决：获取当前点击的对象的所有同级对象包括自己，然后筛选出选中的input标签然后得到长度。如果长度大于0则让父级选中否则父级不选中。
		$('.panel-body :checkbox').click(function() {
			var len=$(this).parent().find(':checkbox:checked').length;
			if(len>0){
				$(this).parent().parent().prev().find(':checkbox').prop('checked', true);
			}else{
				$(this).parent().parent().prev().find(':checkbox').prop('checked', false);
			}
		});
	})

/*jq实现全选反选*/
	/*全选*/
	$("#selectAll").click(function () {
   		$("input[name='power[]']").prop("checked", true);
	});
	/*反选*/
	$("#reverse").click(function () {
	    $("input[name='power[]']").each(function () {
	        $(this).prop("checked", !$(this).prop("checked"));
	    });
	});

</script>



